<!--
  options: 可选，object
    key: string，按钮的类型
    value: boolean，按钮初始状态
    按钮展示的顺序和传入 key 的顺序相同
    默认显示 add edit del cancel save 按钮

  showAll: 可选，boolean。是否要展示所有按钮

  当按钮被点击时，会发出名为 btnClick 的自定义事件
  只有处于 active 状态的按钮被点击时才会发出事件
-->

<template>
  <div class="action-bar">
    <img
      v-for="(isActive, type) in options"
      :key="type"
      :src="
        isActive
          ? getImg(allBtns[type]['activeSrc'])
          : getImg(allBtns[type]['src'])
      "
      :style="{ cursor: isActive ? 'pointer' : 'not-allowed' }"
      @click="click(type)"
    />
  </div>
</template>

<script>
import Vue from "vue";
export default {
  props: {
    options: {
      type: Object,
      default: () => ({
        add: true,
        edit: false,
        del: false,
        save: false,
        cancel: false
      })
    },
    showAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      allBtns: {
        add: {
          type: "add",
          src: "add.png",
          activeSrc: "add-active.png"
        },
        edit: {
          type: "edit",
          src: "edit.png",
          activeSrc: "edit-active.png"
        },
        del: {
          type: "del",
          src: "del.png",
          activeSrc: "del-active.png"
        },
        cancel: {
          type: "cancel",
          src: "cancel.png",
          activeSrc: "cancel-active.png"
        },
        save: {
          type: "save",
          src: "save.png",
          activeSrc: "save-active.png"
        },
        qr: {
          type: "qr",
          src: "qr-code.png",
          activeSrc: "qr-code-active.png"
        },
        "func-auth": {
          type: "func-auth",
          src: "func-auth.png",
          activeSrc: "func-auth-active.png"
        },
        "data-auth": {
          type: "data-auth",
          src: "data1.png",
          activeSrc: "data2.png"
        },
        "assign-role": {
          type: "assign-role",
          src: "assign-roles-no.png",
          activeSrc: "assign-role-active.png"
        }
      }
    };
  },
  computed: {
    showBtnList() {
      return Object.keys(this.options);
    }
  },
  created() {
    if (this.showAll) {
      this.options = {
        "func-auth": false,
        "data-auth": false,
        "assign-role": false,
        add: true,
        edit: false,
        del: false,
        save: false,
        cancel: false
      };
    }
  },
  methods: {
    getImg(name) {
      return require(`@/assets/action-bar-icon/${name}`);
    },
    click(type) {
      if (this.options[type]) {
        this.$emit("btnClick", {
          type,
          openBtn: this.openBtn,
          closeBtn: this.closeBtn,
          open: this.open,
          close: this.close
        });
      }
    },

    // openBtn: 打开某些类型的按钮，并使禁用其他所有按钮
    // closeBtn: 关闭某些类型的按钮，并打开其他所有按钮
    // open: 使某些按钮打开
    // close: 使某些按钮关闭
    // addBtnBefore: 在按钮列表前面添加其他按钮（类似 unshift）
    // addBtnAfter: 在按钮列表前面添加其他按钮（类似 push）
    // delBtn: 删除某个按钮
    // sort: 可以调整按钮的顺序，按顺序依次将按钮类型名称传入即可
    openBtn(...types) {
      this.showBtnList.forEach(
        type => (this.options[type] = types.includes(type))
      );
    },
    closeBtn(...types) {
      this.showBtnList.forEach(
        type => (this.options[type] = !types.includes(type))
      );
    },
    open(...types) {
      types.forEach(
        type => (this.options[type] = this.showBtnList.includes(type))
      );
    },
    close(...types) {
      types.forEach(
        type => (this.options[type] = !this.showBtnList.includes(type))
      );
    },
    addBtnBefore(type, isDisabled = true) {
      this.options = {
        [type]: isDisabled,
        ...this.options
      };
    },
    addBtnAfter(type, isDisabled = true) {
      this.options[type] = isDisabled;
    },
    delBtn(name) {
      Vue.delete(this.options, name);
    },
    sort(...nameList) {
      // 先筛选，防止传入的按钮类型不存在
      const originNameList = Object.keys(this.options);
      const _nameList = nameList.filter(type => originNameList.includes(type));
      const _options = {};
      _nameList.forEach(type => {
        const oldVal = this.options[type];
        _options[type] = oldVal;
      });
      this.options = _options;
    }
  }
};
</script>

<style lang="scss" scoped>
.action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
  margin-bottom: 10px;
  background-color: #00485a;
  img {
    height: 30px;
    cursor: pointer;
    margin-right: 15px;
  }
}
</style>
